<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>无缝滚动2</title>
    <link rel="stylesheet" href="./banner.css" />
    <script src="./animate.js"></script>
</head>

<body>
    <div class="banner">

        <!-- 轮播图 -->
        <ul class="imgBox clearFix">
            <li class="slider" style="background-color: red">1</li>
            <li class="slider" style="background-color: orange">2</li>
            <li class="slider" style="background-color: green">3</li>
            <li class="slider" style="background-color: pink">4</li>
            <li class="slider" style="background-color: yellow">5</li>
        </ul>

        <!-- 指示器存放处 -->
        <ol class="pointBox"></ol>

        <div class="leftRightTabs">
            <a class="prev">&lt;</a>
            <a class="next">&gt;</a>
        </div>
    </div>

    <script>
        // 窗口
        var wrapper = document.querySelector(".banner")

        // 轮播图
        var ul = document.querySelector(".imgBox")
        // 指示器
        var ol = document.querySelector(".pointBox")

        // 所有的幻灯片
        var sliders = document.querySelectorAll("ul>li")
        var sliderWidth = parseFloat(getComputedStyle(sliders[0]).width)
        // 实时记录当前幻灯片的序号
        var currentIndex = 1

        /* 设置指示器的高亮 */
        var pointers = null
        initPointers()

        /* 初始化无限轮播 */
        function initLoop() {
            // 5后添加1
            var tail = sliders[0].cloneNode(true)

            // 1前添加5
            var head = sliders[sliders.length - 1].cloneNode(true)

            ul.appendChild(tail)
            ul.insertBefore(head, sliders[0])

            sliders = document.querySelectorAll("ul>li")

            // 重新设置ul的宽度
            ul.style.width = sliderWidth * sliders.length + "px"
            ul.style.left = -sliderWidth + "px"
        }
        initLoop()

        var btnPrev = document.querySelector(".prev")
        var btnNext = document.querySelector(".next")

        /* 动画结束回调 */
        function onAnimationEnd() {
            // 校正幻灯片序号
            currentIndex >= 6 && (currentIndex = 1)
            currentIndex <= 0 && (currentIndex = 5)

            // 校正幻灯片位置
            ul.style.left = -sliderWidth * currentIndex + "px"

            // 更新指示器
            updatePointer()
        }

        function prev() {
            currentIndex--

            animate(
                ul,
                { left: -600 * currentIndex + "px" },
                1000,
                function () {
                    console.log("动画结束");
                    onAnimationEnd()
                }
            )
        }

        function next() {
            // 保证currentIndex只在0~4间徘徊
            currentIndex++

            animate(
                ul,
                { left: -600 * currentIndex + "px" },
                1000,
                function () {
                    console.log("动画结束");
                    // 移形换影
                    onAnimationEnd()
                }
            )
        }

        btnPrev.onclick = function (e) {
            prev()
        }
        btnNext.onclick = function (e) {
            next()
        }

        function updatePointer() {
            pointers.forEach(
                function (p, index) {
                    if (index === currentIndex - 1) {
                        p.classList.add("active")
                    } else {
                        p.classList.remove("active")
                    }
                }
            )
        }

        /* 初始化指示器 */
        function initPointers() {
            var docFragment = document.createDocumentFragment()
            sliders.forEach(
                function (s, index) {
                    var li = document.createElement("li")
                    docFragment.appendChild(li)
                }
            )
            ol.appendChild(docFragment)

            // 找出所有指示器
            pointers = document.querySelectorAll("ol>li")

            // 更新指示器的高亮序号
            updatePointer()
        }

        /* 自动轮播 */
        var timer = null
        function startAutoPlay() {
            if (!timer) {
                timer = setInterval(() => {
                    next()
                }, 2000);
            }
        }
        startAutoPlay()

        function stopAutoPlay() {
            if (timer) {
                clearInterval(timer)
                timer = null
            }
        }


        /* 鼠标覆盖窗口时停止轮播 */
        wrapper.onmouseenter = function (e) {
            stopAutoPlay()
        }
        wrapper.onmouseleave = function (e) {
            startAutoPlay()
        }

    </script>

</body>

</html>